<!DOCTYPE html>

<html class="no-js">
  <!-- sdf -->

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/index.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.0/theme-chalk/index.css"
    />
    <link rel="stylesheet" href="../../../lib/index.css" />
    <script src="../../../lib/avue.js"></script>
  </head>

  <body>
    <div id="app">
      <avue-echart-table
        height="200"
        :option="option"
        :data="data"
      ></avue-echart-table>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          data: [
            {
              type1:
                "数据数据数据数据数据数据数据数据数据数据11",
              type2: "数据12",
              type3: "数据13"
            },
            {
              type1: "数据21",
              type2: "数据22",
              type3: "数据23"
            },
            {
              type1: "数据31",
              type2: "数据32",
              type3: "数据33"
            },
            {
              type1: "数据41",
              type2: "数据42",
              type3: "数据43"
            },
            {
              type1: "数据51",
              type2: "数据52",
              type3: "数据53"
            },
            {
              type1: "数据61",
              type2: "数据62",
              type3: "数据63"
            }
          ],
          option: {
            indexLabel: "序号",
            index: false,
            rank: false,
            isCircle:true,
            columnShow: false,
            columnViews: false,
            headerBackground: "rgba(30, 144, 255, 1)",
            headerColor: "rgba(241, 242, 245, 1)",
            headerTextAlign: "center",
            bodyBackground: "rgba(0, 0, 0, 0.01)",
            bodyColor: "rgba(0, 0, 0, 1)",
            borderColor: "rgba(51, 65, 107, 1)",
            bodyTextAlign: "center",
            column: [
              {
                label: "车牌号",
                prop: "type1",
                width: "100",
                cellIcon:"el-icon-view",
                cellIconStyle:{
                    color:"red"
                },
              },
            ],
            align: "center",
            headerAlign: "center",
            header: false,
            scroll: false,
            scrollTime: 1000,
            fontSize: 15,
            count: 4,
            nthColor: "rgba(127, 185, 242, 1)",
            othColor: "rgba(164, 205, 244, 1)",
            scrollCount: 1,
          }
        };
      },
      mounted() {
        setTimeout(() => {
          this.option.column.push({
            label: "类型3",
            prop: "type3"
          });
        }, 2000);
      }
    });
  </script>
</html>
